<template>
	<div class="liveReservation_list">
		<div class="teach_h classIndex_h">
			<router-link to="/teach/live/listappoint">预约直播</router-link>
			<strong v-if="$route.query.name"><i>></i>{{$route.query.name}}</strong>
			<strong v-else><i>></i>详情</strong>
		</div>
		<!--  -->
		<div class="classNotice_search">
			<div class="dateTime">
				<el-date-picker v-model="startTime" type="date" @change="changeSearch" value-format="yyyy-MM-dd" placeholder="选择开始日期">
				</el-date-picker>
				<el-date-picker v-model="endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择结束日期">
				</el-date-picker>
			</div>
			<router-link :to="{path: '/teach/live/addappoint', query: {id: path}}">发起预约</router-link>
		</div>
		<!--  -->
		<div class="classNotice_search">
			<div class="liveSelect">
				<template>
					<el-select filterable v-model="liveType" @change="changeSearch" placeholder="请选择">
						<el-option label="全部状态" :value="null"></el-option>
						<el-option label="未开始" :value="1"></el-option>
						<el-option label="已开始" :value="2"></el-option>
						<el-option label="已结束" :value="3"></el-option>
					</el-select>
				</template>
				<template v-if='!$store.state.isSchool'>
					<el-select filterable v-model="grade_id" placeholder="请选择">
						<el-option v-for="(item, index) in orgLevel3" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>

					<el-select filterable v-model="subject_id" placeholder="请选择">
						<el-option v-for="(item, index) in orgSubject" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</template>
			</div>
			<el-input class="classNotice_sc fr" placeholder="按直播，主讲人搜索" prefix-icon="el-icon-search" @change="changeSearch" v-model="keyword">
			</el-input>
		</div>
		<!--  -->
		<div class="publishFrom_table" v-if="placeholder !== true">
			<template>
				<el-table border ref="singleTable" :data="curriculumList" highlight-current-row style="width: 100%">
					<el-table-column prop="l_name" label="课程名称" width="200" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="materialname" align='center' label="课程分类" width="80" show-overflow-tooltip>
					</el-table-column>
					<el-table-column width="80" align='center' prop="name" label="主讲人" show-overflow-tooltip>
					</el-table-column>
					<el-table-column width="260" align='center' prop="duration" label="直播时间" show-overflow-tooltip>
					</el-table-column>
					<el-table-column width="78" align='center' prop="jieci" label="直播节次" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			keyword: '',
			/*关键字搜索*/
			total_number: 0,
			page_index: 1,
			page_size: this.$g.page_size,

			startTime: '',
			/*开始时间*/
			endTime: '',
			/*结束时间*/
			grade_id: 0, //年级
			subject_id: 0, //科目
			orgLevel3: [], //年级
			orgSubject: this.$g.subjectList,//科目
			curriculumList: [], //列表数据
			liveType: null,
			/*直播状态*/
			placeholder: false,
			path: this.$route.query.id,
		}
	},

	created() {
		this.getCurriculumList()
		this.getOrgLevel3();
	},
	watch: {
		'grade_id'(val, val2) {
		
			this.subjectject_id = null
			this.changeSearch()

		},
		'subject_id'(val, val2) {
			this.changeSearch()
		},
		'endTime'(val, val2) {
			this.changeSearch()
		}
	},
	methods: {
		//列表
		getCurriculumList() {
			let success = res => {
				let data = res.data;
				this.curriculumList = data.data;
				this.total_number = data.data_sum
				this.page_index = parseInt(data.page_index)
				this.placeholder = this.curriculumList.length === 0 ? true : false
				this.subjectList = this.$g.subjectList
			};
			this.$ajax({
				url: "api/live/getgeneral_list",
				method: "get",
				params: {
					starttime: this.startTime,
					endtime: this.endTime,
					type: this.liveType,
					grade_id: this.grade_id,
					subject_id: this.subject_id,
					keyword: this.keyword,
					classroomid: this.$route.query.id,
					page_index: this.page_index,
					page_size: this.page_size,
				},
				func: { success: success }
			});
		},
		//获取年级
		getOrgLevel3() {
			let success = res => {
				let data = res.data;
				if (data.length === 0) {return;}
				this.orgLevel3 = data;
				this.orgLevel3.unshift({ id: 0, name: '全部年级' })
			};

			let params = {
				level: 3,
				// pid: 1,
				direction: 'balance',
			}

			if (this.$store.state.isCheckLevel) {
				params.platform_id = 0
				this.$ajax.get('api/newlevel/platform_org', { params: params, func: { success: success } })
			} else {
				this.$ajax.get('api/org/org', { params: params, func: { success: success } })
			}
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getCurriculumList()
		},

		//搜索
		changeSearch() {
			this.page_index = 1;
			this.getCurriculumList()
		},
	}
}
</script>